<script setup>
//创建表单登录对象
import {onMounted, ref} from 'vue'
import {doGet, doPost} from "../util/request.js";
import {showMessage} from "../util/message.js";
import {TOKEN_NAME} from "@/util/constants.js";

const loginForm = ref({})
//创建登录表单响应式验证规则对象
const rules = ref({
  loginAct: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
  ],
  loginPwd: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur'}
  ]
})
//创建表单验证响应式对象
const LoginRuleFormRef = ref({})
//提交表单
const submitForm = (form1) => {

  if (!form1) return
  form1.validate(valid => {
    if (valid) {
      //获取记住我
      let rememberMe = loginForm.value.rememberMe === undefined ? false : true
      //创建用户表单对象
      const formData = new FormData()
      formData.append('loginAct', loginForm.value.loginAct)
      formData.append('loginPwd', loginForm.value.loginPwd)
      formData.append('rememberMe', rememberMe)
      console.log(rememberMe)
      //发送请求
      doPost('/api/login', formData).then(res => {
        if (res.data.code === 200) {
          //登陆成功
          //使用web之前清除token
          sessionStorage.removeItem(TOKEN_NAME)
          localStorage.removeItem(TOKEN_NAME)
          //获取令牌token
          let token = res.data.data
          //判断是否记住我
          if (rememberMe) {
            //将token存放到本地内存中
            localStorage.setItem(TOKEN_NAME, token)
          } else {
            //将token存放到浏览器session缓存中
            sessionStorage.setItem(TOKEN_NAME, token)
          }
          //登录成功跳转到首页
          window.location.href = '/index'
          showMessage('登录成功', 'success')
        } else {
          //登录失败
          showMessage("登录失败: " + res.data.msg, 'error')
        }
      })
    }
  })
}
/**
 * 重置表单
 * @param formEl
 */
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

onMounted(() => {
  //页面加载完成后执行的内容
  //从本地获取令牌
  let token = localStorage.getItem(TOKEN_NAME)
  //判断是否为空
  if (token) {
    //将token存放到本地缓存中
    doGet('/api/user/isLogin').then(resp => {
      //跳转首页
      window.location.href = '/index'
    })
  }
})
</script>


<template>
  <el-container>

    <!--左侧：侧边栏容器-->
    <el-aside>
      <img class="login-img" src="../assets/gq.jpg" alt="登录图片">
      <div class="login-text">欢迎使用动力云客系统</div>
    </el-aside>

    <!--右侧：主要区域容器-->
    <el-main>
      <h3 style="margin-top: 200px;margin-left: 38%">欢迎登录</h3>

      <el-form
          ref="LoginRuleFormRef"
          style="max-width: 300px;margin-left: 25%;margin-right: 35%"
          label-width="auto"
          :model="loginForm"
          :rules="rules"
          status-icon>
        <el-form-item label="帐号" prop="loginAct">
          <el-input v-model="loginForm.loginAct"/>
        </el-form-item>

        <el-form-item label="密码" prop="loginPwd">
          <el-input type="password" v-model="loginForm.loginPwd"/>
        </el-form-item>

        <el-form-item label=" ">
          <el-button type="primary" @click="submitForm(LoginRuleFormRef)">登录</el-button>
          <el-button @click="resetForm(LoginRuleFormRef)">重置</el-button>
        </el-form-item>

        <el-form-item label=" " prop="name">
          <el-checkbox v-model="loginForm.rememberMe" name="type">
            30天免登录
          </el-checkbox>
        </el-form-item>
      </el-form>


    </el-main>
  </el-container>

</template>

<style scoped>
.el-aside {
  /*background-color: #909399;*/
  height: calc(97vh);
  width: 45%;
  text-align: center;
}

.login-text {
  color: #333333;
  font-size: 30px;
}

.login-img {
  width: 100%;
  //height: 30%;
  margin-top: 150px;
}

/*.el-main {
  color: #333;
  text-align: center;
}*/
.el-button, .el-checkbox {
  margin-left: 15%;
}
</style>